<template>
	<tab v-model="activeKey" :navData="scrollData" @change="tabChange" @tabClick="tabClick">
		<view :slot="item.slot" v-for="(item,key) in scrollData" :key="key">
			<scroll-view scroll-y height="400rpx">
				<view v-if="error">{{error.message}}</view>
				<!-- 推荐 -->
				<view v-else-if="key==0">
					<unicloud-db where="is_recommend==true" v-slot:default="{data, loading, error, options}"
						collection="opendb-mall-goods">
						<view v-for="(item,index) in data" @click="clickGoods(item._id)" :key="index">
							<uni-row class="row">
								<uni-col :span="8">
									<view>
										<image class="goods-img" :src="item.goods_thumb.path"></image>
									</view>
								</uni-col>
								<uni-col :span="16">
									<view class="goods-desc-box">
										<p>
											{{item.name}}
										</p>
										<text>
											{{item.goods_desc}}
										</text>
									</view>
									<view class="price-box">
										<text class="price-font">
											<text class="yuan-font">￥</text>
											<text style=" font-size: 40rpx;">
												{{item.goods_price}}
											</text>
										</text>
									</view>
								</uni-col>
							</uni-row>
							<view style="height: 10px;"></view>
						</view>
					</unicloud-db>
				</view>
				<!-- 动态 -->
				<view v-else-if="key==1">
					<unicloud-db v-slot:default="{data, loading, error, options}" collection="notice">
						<view v-for="(item,index) in data" :key="index">
							<uni-card :title="item.title">
								<text class="notice-card">{{item.content}}</text>
							</uni-card>
						</view>
					</unicloud-db>
				</view>
				<!-- 养护常识 -->
				<view v-else-if="key==2">
					<unicloud-db v-slot:default="{data, loading, error, options}" collection="maintenance">
						<view v-for="(item,index) in data" :key="index">
							<uni-card :title="item.title">
								<text class="notice-card">{{item.content}}</text>
							</uni-card>
						</view>
					</unicloud-db>
				</view>
				<!-- 汽车信息 -->
				<!-- <view v-else-if="key==3">汽车信息</view> -->
			</scroll-view>
		</view>
	</tab>
</template>

<script>
	import tab from '@/components/Mark-Tab/Tab.vue';
	export default {
		data() {
			return {
				activeKey: 0,
				scrollData: [{
						label: '推荐',
						slot: 'slot-1'
					},
					{
						label: '车行动态',
						slot: 'slot-2'
					},
					{
						label: '养护常识',
						slot: 'slot-3'
					},
					// {
					// 	label: '汽车信息',
					// 	slot: 'slot-4'
					// }
				],
			}
		},
		methods: {
			tabChange(e) {
				console.log(e);
			},
			tabClick(e) {
				console.log(e);
			},
			change(e) {
				console.log("e:", e);
			},
			async clickGoods(id) {
				let res = await uniCloud.importObject('goods').getById(id)
				uni.navigateTo({
					url: '/pages/details/details?item=' + encodeURIComponent(JSON.stringify(res[0]))
				})
			},
		},
		components: {
			tab
		}
	}
</script>

<style>
	/* 动态 */
	.notice-card {
		word-wrap: break-word;
		width: 100%;
		height: 100%;
	}

	/* 商品区 */
	.goods-box {
		width: 710rpx;
		margin: 10px auto 0rpx;
	}

	.goods-desc-box {
		height: 70%;
		width: 85%;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.goods-desc-box text {
		font-size: 12px;
		color: #a2a2a2;
	}

	.goods-img {
		height: 200rpx;
		width: 200rpx;
		border-radius: 8px
	}

	.row {
		height: 200rpx;
		border-radius: 18rpx;
		background-color: #ffffff;
	}

	.yuan-font {
		color: #FF5000;
		font-size: 32rpx;
	}

	.price-box {
		height: 30%;
		width: 85%;
		word-wrap: break-word;
		position: absolute;
		bottom: 0rpx;
	}

	.x1 {
		font-size: 32rpx;
		margin: 10rpx;
		width: 50rpx;
		height: 50rpx;
		border: #8a8a8a 1px solid;
		border-radius: 18rpx;
		display: inline-block;
		line-height: 50rpx;
		text-align: center;
	}
</style>